/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
var arriba = false;
var abajo = false;
var izquierda = false;
var derecha = false;
var canvas = null;//esta variable representara el canvas
var context = null;// mientras que esta representara el contexto donde dibujaremos todo.
var socket = null;
var wsUrl = "ws://localhost:8080/Corsario/endpoint";
socket = new WebSocket(wsUrl);
var x = 100;
var y = 100;
var coordJSON = {"tecla":" ","xlancha":0,"ylancha":0,"xbarco":0,"ybarco":0};    

function iniciar()
{
    canvas = document.getElementById("agua");
    if (canvas.getContext)
    {
            context = canvas.getContext('2d');
           //alert("tu navegador SIIII soporta canvas");
    } 
    else 
    {
    }
    if (canvas !== null)
    {
        setInterval(ciclo, 1000);
        function ciclo() 
        {
            var img = new Image();
            img.src = 'resource/fondo_agua.png';
            context.drawImage(img, 0, 0);
            var img2 = new Image();
            img2.src = 'resource/lancha.png';
            context.drawImage(img2, x, y); //x,y no llega x e y
            
            //creamos una función que manejaremos que vamos hacer cuando, pulsen una tecla
            function pulsar(e){
                switch(e.keyCode){
                    //cargo json con la tecla que toco 
                    //izquierda
                    case 37:
                            coordJSON.tecla ="izquierda";     
                            coordJSON.xlancha = coordJSON.xlancha - 5;    
                        /*izquierda = true;
                            x = x-15;*/
                            break;
                    //arriba
                    case 38:
                            coordJSON.tecla ="arriba";         
                            coordJSON.ylancha = coordJSON.ylancha - 5;
                            /*y = y+15;
                            arriba = true;*/
                            break;
                    //derecha
                    case 39:
                            coordJSON.tecla ="derecha";  
                            coordJSON.xlancha = coordJSON.xlancha + 5;
                            /*x = x+15;
                            derecha = true;*/
                            break;
                    //abajo
                    case 40:
                           coordJSON.tecla ="abajo";     
                           coordJSON.ylancha = coordJSON.ylancha + 5;
                           /*hay que ver si la carga de coordenadas se hacen aca
                            * y = y - 15;    
                           abajo = true;*/
                           break;
                }
            }
            //cuando presionen la tecla (osea cuando el evento keydown se active) quiero que ejecute mi función pulsar
            //false tiene que ver con capturas por el momento no se moleste, y si lo saben pues tampoco se molesten
            window.addEventListener('keydown', pulsar, false);
            
            function soltar(e){
	    switch(e.keyCode){
		//izquierda
		case 37:
			izquierda = false;
			break;
		//arriba
		case 38:
			arriba = false;
			break;
		//derecha
		case 39:
			derecha = false;
			break;
		//abajo
		case 40:
			abajo = false;
			break;
	}
}
//cuando suelten una tecla (osea cuando el evento keyup se active) quiero que ejecute mi función soltar
            window.addEventListener('keyup', soltar, false);
           // if(abajo || arriba || derecha || izquiera ){
                sendMessage();
          
            //funciones del web socket
            socket.onerror = function(message) {
                console.log("ha sucedido un erro: " + message.data);
            }
            
            socket.onopen = function(message) {
                console.log("Se conecto a:" + wsUrl);
            }
            function sendMessage()
                {
                    socket.send(JSON.stringify(coordJSON));
                    //envia el JSON al tocket
                    //socket.send(int(x)); //pasar el json en tero con x e y de los barocs y lanchas
                    //abajo = false;
                }
            socket.onmessage = function (message){
                //no esta entrando aca 24/02 - 12:54
                console.log("se ha recibido un mensaje de servidor: " + message.data);
                var jsonData = JSON.parse(message.data);
                // aca segun lo que me viene en el JSON es lo que voy hcaer
                //creo que quizas es aca donde tiene que mover las coordns y no en el soltar o pulsar
             //x = jsonData.xlancha;
             //   y = jsonData.ylancha;
                if(jsonData.message !== null)  {
                message.value += jsonData.message + "\n"    
                console.log(message.value += jsonData.message + "\n"); //no entiendo para que es esto
                }
              //  x = coordJSON.xlancha;
             //   y = coordJSON.ylancha;
                sendMessage();
                //le tuve que poner ese send de nuevo para que "refresque" y como que vuelva a solicitar los datos
                //
                //mueve cada cliente por separado
                //
                //ya descubri lo que pasa que aumenta tanto el mov, sigue enviando la ultima 
                //tecla presionada por mas que no la este presionando
                //hay que agregar una validacion para que si no hay un evento de tecla no modifique, resetear la tecla digamos
                //creo que eso es con keyup que no lo tenemos implementado
                }
            }     
        }
}  

